<template>
  <div :class="prefixCls">
    <e-input
      v-model="currentQuery"
      :disabled="disabled"
      size="middle"
      :icon="icon"
      :placeholder="placeholder"
      @on-click="handleClick"></e-input>
  </div>
</template>
<script>
import eInput from "../input";

export default {
  name: 'Search',
  props: {
    prefixCls: String,
    placeholder: String,
    query: String,
    disabled:Boolean
  },
  emits: ['on-query-change', 'on-query-clear'],
  components:{eInput},
  data () {
    return {
      currentQuery: this.query,
    }
  },
  watch: {
    query (val) {
      this.currentQuery = val;
    },
    currentQuery (val) {
      console.log('val',val);
      this.$emit('on-query-change', val);
    }
  },
  computed:{
    icon () {
      return this.query === '' ? 'search' : 'close-circle-filled';
    }
  },
  methods: {
    handleClick () {
      if (this.currentQuery === '') return;
      this.currentQuery = '';
      this.$emit('on-query-clear');
    }
  }
}
</script>
